<template>
	<div class="steps">		
		<div class="steps-right" :style="color">
			<van-cell :border="false" class="cell-top" title="提交申请" :value="smallObj.create_datetime"></van-cell>
			<p>{{smallObj.create_admin_relname}}</p>
		</div>
		<div class="steps-left">
			<van-icon name="checked" :color="allColor.other_icon_color"/>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				allColor:{}
			}
		},
		created() {
			this.allColor = this.$store.state.allColor
		},
		watch:{
			storeColor:function(val){
				this.allColor = val
			}
		},
		props:['smallObj'],
		computed:{
			storeColor(){
				return this.$store.state.allColor
			},
			color(){
				return {
					'background-color':this.allColor.other_bg_color,
					'border-left':`4px solid ${this.allColor.other_icon_color}`
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.steps{
		// border: 1px solid;
		padding: 0 vw(14);
		height: vw(66);
		display: flex;
		flex-direction:row-reverse
	}
	.steps-left{
		width: 6%;
		border-left: vw(2) solid $line-2;
		position: relative;
	}
	.steps-right{
		width: 90%;
		height: vw(54);
		// border-left: 4px solid red;
		// background-color: #07C160;
	}
	.steps-right p{
		font-size: vw(14);
		padding-left: vw(14);
		line-height: vw(24);
	}
	.cell-top{
		background-color: rgba(0,0,0,0);
	}
	.cell-top{
		padding: vw(5) vw(16) 0 vw(14);
	}
	.van-icon{
		font-size: vw(24);
		top: vw(17);
		right: vw(13);
	}
	.van-cell{
		/deep/ .van-cell__title{
			font-size: vw(14);
			font-weight: 550;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		/deep/ .van-cell__value{
			font-size: vw(12);
		}
	}
</style>

